<template>
    <div style="width:100%;" ref="qrcodemain" class="imageView">
        <div ref="qrcode" v-if="shows">
        </div>
        <div ref="qrcode2" style="text-align:center">
        </div>
        <el-button size="mini" type="primary" @click="downloadImg" style="margin-top:5px;" v-if="!shwoAlert">下载二维码图片</el-button>
        <div v-if="shwoAlert" style="font-size:32px">
            请先保存数据
        </div>
    </div>
</template>
<script>
import Vue  from 'vue'
import QRCode from 'qrcodejs2'  // 引入qrcode

export default {
    props:["exkey","data"],
    data(){
        return{
            shows:true,
            qrCanvas:null,
            qrcodeText:"",
            qrcodeValue:"",
            shwoAlert:false,
            width:200
        }
    },
    created(){
        let text=this.exkey.text.split(".")
        let value=this.exkey.text.split(".")
        this.qrcodeText=this.data[text[0]][text[1]]
        this.qrcodeValue=this.data[value[0]][value[1]]
        if(this.exkey.width){
            this.width=this.exkey.width
        }
    },
    mounted(){
        if(this.qrcodeValue)
            this.createQRcode();
        else{
            this.shwoAlert=true
        }
       
    },
    methods:{
        createQRcode(){
            let qrcodeContent=this.$refs.qrcode
            let qrcodeContent2=this.$refs.qrcode2
            let qrcodeCanvas = new QRCode(qrcodeContent, {
                text: this.qrcodeValue, // 需要转换为二维码的内容
                width: this.width,
                height: this.width,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
            });
            var resolutionMultiple = 1; // 分辨率倍数
            var borderSize = 5 * resolutionMultiple; // 边框留白
            var canvasWidth = this.width * resolutionMultiple; // 图片宽度
        
            // 判断 参数为空的命名情况
            var text = this.qrcodeText; // 底部文字
            var fontSize = 32 * resolutionMultiple; // 文字大小
        
            var canvasHeight = canvasWidth + fontSize;
            var canvas = document.createElement("canvas");
            if (!canvas.getContext) return;
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
        
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(255,255,255)"; // 调色(纯白)
            ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制背景
        
            var qrcodeSize = canvasWidth - borderSize * 2;
            ctx.drawImage(
                qrcodeContent.querySelector("canvas"),
                borderSize,
                borderSize,
                qrcodeSize,
                qrcodeSize
            ); // 填充二维码
        
            ctx.fill(); // 填充背景
        
            ctx.fillStyle = "rgb(0,0,0)"; // 调色(纯黑)
            ctx.font = fontSize + "px Arial"; // 文本大小, 字体
            ctx.textAlign = "center";
            ctx.fillText(
                text,
                canvasWidth / 2,
                qrcodeSize + borderSize + fontSize,
                qrcodeSize
            ); // 绘制文本
            // 清除原二维码

        // qrcodeContent.clear()
            qrcodeContent2.appendChild(canvas);
            this.qrCanvas=canvas;
            this.shows=false;


            
        },
        downloadImg(){
            const a = document.createElement('a'); // 创建一个HTML 元素
            let url = this.qrCanvas.toDataURL('image/png') ;
            a.setAttribute('download', this.qrcodeText); //download属性
            a.setAttribute('href', url); // href链接
            a.click(); // 自执行点击事件
        }
    }
}
</script>
<style scoped>
    .imageView{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;
        padding:20px;
    }
</style>